<template>
	<view class="index_login">
		<!-- 启动动画 -->
		<view v-if="logoinFlag" class="animationbox animate__animated animate__fadeInDown">
			<view class="flex_cloumn">
				<image class="animationImg" src="@/static/images/logo.png" mode=""></image>
			</view>
		</view>
		<!-- 登录 -->
		<view v-if="!logoinFlag" class="loginBox">
			<image class="img1" src="../../static/images/圆装饰大.png" mode=""></image>
			<image class="img2" src="../../static/images/圆装饰中.png" mode=""></image>
			<image class="img3" src="../../static/images/圆装饰小.png" mode=""></image>
			<image class="img4" src="../../static/images/圆装饰极小.png" mode=""></image>
			<view class="commImg">
				<image class="flex_cloumn animationImg" src="@/static/images/logo.png" mode=""></image>
				<view class="flex_center animationoText">
					供应链商家
				</view>
			</view>
			<!-- 密码登录 -->
			<view v-if="showPwdCode" class="pasLogoin">
				<view class="inputStyle mobile">
					<image class="input-icon1" src="@/static/images/手机_iphone.png" mode=""></image>
					<input type="number" v-model="mobileValue" :maxlength="11" placeholder="请输入手机号" />
				</view>
				<view class="inputStyle password">
					<image class="input-icon1" src="@/static/images/锁定.png" mode=""></image>
					<image v-if="showPassword" class="input-icon2" src="@/static/images/查看密码.png" mode=""
						@click="showPassword=!showPassword">
					</image>
					<image v-if="!showPassword" class="input-icon2" src="@/static/images/隐藏查看密码.png" mode=""
						@click="showPassword=!showPassword">
					</image>
					<input v-model="passwordValue" :password="showPassword" placeholder="请输入密码" />
				</view>
				<view class="inputStyle logoinBtn" @click="logoinClick">
					登录
				</view>
				<view class="flex_center codeSwitch" @click="showPwdCode=!showPwdCode">
					<text style="text-decoration:underline;">验证码登录</text>
				</view>
			</view>
			<!-- 验证码登录 -->
			<view v-if="!showPwdCode" class="codeLogoin">
				<view class="inputStyle mobile">
					<image class="input-icon1" src="@/static/images/手机_iphone.png" mode=""></image>
					<input type="number" v-model="mobileValue" :maxlength="11" placeholder="请输入手机号" />
				</view>
				<view class="noteCode">
					<view class="note">
						<image class="input-icon1" src="@/static/images/锁定.png" mode=""></image>
						<input type="number" v-model="codeValue" :cursor="100" :maxlength="6" placeholder="请输入验证码" />
					</view>
					<view class="CodeText" :style="{'color':codeBtn.codeTtextStyle}" @click="getPhonecode">
						{{codeBtn.codeText}}
					</view>
				</view>
				<view class="inputStyle logoinBtn" @click="logoinClick">
					登录
				</view>
				<view class="flex_center codeSwitch" @click="showPwdCode=!showPwdCode">
					<text style="text-decoration:underline;">密码登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onHide,
		onLaunch,
		onLoad,
		onShow,
	} from '@dcloudio/uni-app'; //引入uniapp 生命周期

	import {
		ref
	} from 'vue'; //引入vue 
	import {
		SCM_login,
		SCM_send_sms,
		SCM_login_sms
	} from '@/api/api.js' //引入api接口
	const logoinFlag = ref(true); //启动和登录切换
	const mobileValue = ref(''); //手机value
	const passwordValue = ref(''); //密码value
	const codeValue = ref(''); //验证码value
	const showPassword = ref(true); //显示明文密码
	const showPwdCode = ref(true); //密码 验证 页面切换

	const codeBtn = ref({
		codeTime: 60,
		codeText: "获取验证码",
		codeStatus: true,
		codeTtextStyle: '#007B46'
	}); //密码 验证 页面切换

	// 账号密码登录接口
	const logoinClick = async () => {
		if (mobileValue.value.length !== 11) return uni.showToast({
			title: '请填写正确手机号码',
			icon: 'none',
			mask: true
		})
		// 密码登录----
		if (showPwdCode.value) {
			if (!passwordValue.value) return uni.showToast({
				title: '请填写密码',
				icon: 'none',
				mask: true
			})
			let params = {
				username: mobileValue.value,
				password: passwordValue.value,
			}
			const res = await SCM_login(params)
			if (res && res.code == 0) {
				uni.setStorageSync('userInfo', JSON.stringify(res.data))
				uni.setStorageSync('token', res.data.access_token)
				uni.switchTab({
					url: '/pages/orderList/orderList'
				});
			}
		} else {
			// 验证码登录------
			if (!codeValue.value) return uni.showToast({
				title: '请填写验证码',
				icon: 'none',
				mask: true
			})
			let params = {
				username: mobileValue.value,
				code: codeValue.value,
			}
			const res = await SCM_login_sms(params)
			if (res && res.code == 0) {
				uni.setStorageSync('userInfo', JSON.stringify(res.data))
				uni.setStorageSync('token', res.data.access_token)
				uni.switchTab({
					url: '/pages/orderList/orderList'
				});
			}
		}

	};
	// 获取验证码
	const getPhonecode = async () => {
		if (mobileValue.value.length !== 11) return uni.showToast({
			title: '请填写正确手机号码',
			icon: 'none',
			mask: true
		})
		if (codeBtn.value.codeStatus) {
			// 调用验证码接口
			let params = {
				mobile: mobileValue.value,
			}
			let res = await SCM_send_sms(params)
			if (res && res.code == 0) {
				codeBtn.value.codeStatus = false
				let timerId = setInterval(() => {
					let codetime = codeBtn.value.codeTime
					codetime--
					codeBtn.value.codeTime = codetime
					codeBtn.value.codeText = codetime + "s 后获取"
					codeBtn.value.codeTtextStyle = '#808080'
					if (codetime < 1) {
						clearInterval(timerId)
						codeBtn.value.codeText = "获取验证码"
						codeBtn.value.codeTime = 60
						codeBtn.value.codeStatus = true
						codeBtn.value.codeTtextStyle = '#007B46'
					}
				}, 1000)
			}



		}
	};


	onLoad(() => {
		setTimeout(() => {
			logoinFlag.value = false
		}, 2500)

	})
</script>

<style lang="scss">
	.index_login {
		width: 100vw;
		height: 100vh;

		// 启动动画
		.animationbox {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.animationImg {
			width: 377rpx;
			height: 373rpx;
		}

		.animationoText {
			font-size: 42rpx;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: bold;
			color: #007B46;
		}

		.loginBox {
			width: 100%;
			height: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.img1 {
				width: 392rpx;
				height: 398rpx;
				position: absolute;
				top: -100rpx;
				left: -120rpx;
			}

			.img2 {
				width: 233rpx;
				height: 237rpx;
				position: absolute;
				top: 300rpx;
				right: -90rpx;
			}

			.img3 {
				width: 131rpx;
				height: 133rpx;
				position: absolute;
				bottom: -30rpx;
				left: -30rpx;
			}

			.img4 {
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				bottom: 150rpx;
				right: 50rpx;
			}

			.commImg {
				margin-top: 200rpx;
			}

			.inputStyle {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 110rpx;
				color: #111;
				background: #eee;
				border-radius: 60rpx;
			}

			.input-icon1 {
				position: absolute;
				top: 50%;
				left: 45rpx;
				transform: translate(0, -50%);
				width: 46rpx;
				height: 46rpx;
			}

			.input-icon2 {
				position: absolute;
				top: 50%;
				right: 45rpx;
				transform: translate(0, -50%);
				width: 46rpx;
				height: 46rpx;
			}

			.mobile {}

			.password {
				margin: 50rpx 0;
			}

			.logoinBtn {
				font-size: 34rpx;
				color: #FFF;
				background: #007B46;
			}

			.codeSwitch {
				margin-top: 21rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #007B46;
			}

			// 密码登录
			.pasLogoin {
				width: 80%;
				height: 100%;
				margin-top: 130rpx;
			}

			// 验证码登录
			.codeLogoin {
				width: 80%;
				height: 100%;
				margin-top: 130rpx;

				// 验证码
				.noteCode {
					margin: 52rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 110rpx;
					color: #111;

					.note {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 70%;
						height: 110rpx;
						background: #eee;
						border-radius: 59rpx 59rpx 59rpx 59rpx;

						input {
							padding-left: 140rpx
						}

						.input-icon {
							position: absolute;
							top: 50%;
							left: 45rpx;
							transform: translate(0, -50%);
							width: 46rpx;
							height: 46rpx;
						}

					}

					.CodeText {
						font-size: 30rpx;
					}
				}

			}
		}
	}
</style>